<template>
  <div class="body">
    <div class="head">
      <div class="left"> 
        <div class="top_ul">
          <ul>
            <li class="ulborder"><span>添加商品</span></li>
            <li
              :class="
                multipleSelection && multipleSelection.length > 0
                  ? 'ulborder'
                  : 'default'
              "
              @click="dellist()"
            >
              <span>批量删除</span>
            </li>
            <li class="searchl">
                <span>积分范围</span>
                <el-input size="small" v-model="input12" style="width: 60px;height:28px ;" /> 
                <span>—</span>
                <el-input size="small" v-model="input13" style="width: 60px;height:28px ;" />
            </li>
            <li class="searchl seach">
              <el-input
                size="small"
                placeholder="商品标题"
                v-model="input3"
                style="width: 300px;height:31px;"
              >
                <el-button slot="append">查询</el-button>
              </el-input>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        ref="dataTable"
        stripe
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        style="width: 100%;"
        :header-cell-style="{
          color: '#3D3D3D',
          'font-size': '22px',
          height: '60px',
          'font-weight': '400',
          'background-color': '#F8F9FB',
          'border-bottom': 'none',
        }"
      >
        <el-table-column type="selection" width="46"> </el-table-column>
        <el-table-column prop="name" label="商品名称" width="350">
            <template slot-scope="scope">
            <div class="youName">
              <img src="../../assets/img/a.jpg" alt="无法显示" title="商品信息" style='width:50px;height50px;margin-right:8px'/>
              <div class="item">
                <div>{{ scope.row.name }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="describe" label="积分价格" width="230" align="center">
        </el-table-column>
        <el-table-column prop="top" label="库存数量" width="180" property="value" align="center">
          <template slot-scope="scope">
            <div class="elInputs" v-if="scope.row.elStyle==true">
              <!-- <el-input size="small" v-model="scope.row.type" disabled></el-input> -->
              <div>{{scope.row.type}}</div>
            </div>
            <div class="elInputon" v-else>
              <el-input size="small" v-model="scope.row.type"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="ascription"
          label="已兑数量"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="top" label="每人限兑" width="180" property="value" align="center">
            <template slot-scope="scope">
              <div class="elInputs" v-if="scope.row.elStyle==true">
                <div>{{scope.row.state}}</div>
              </div>
              <div class="elInputon" v-else>
                <el-input size="small" v-model="scope.row.state"></el-input>
              </div>
          </template>
        </el-table-column>
        <el-table-column prop="top" label="排序" width="170" property="value" align="center">
            <template slot-scope="scope">
              <div class="elInputs" v-if="scope.row.elStyle==true">
                <div>{{scope.row.stock}}</div>
              </div>
              <div class="elInputon" v-else>
                <el-input size="small" v-model="scope.row.stock"></el-input>
              </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template slot-scope="scope">
            <button @click="bianji(scope.$index,scope.row)">{{scope.row.showView==false?'完成':'编辑'}}</button>
            <!-- <button style="display:none">完成</button> -->
            <button>删除</button>
            <button>上架</button>
            <button style='display:none'>下架</button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagiton">
      <button class="btn-default" type="submit" @click="prePage">
        <i class="el-icon-caret-left"></i>
      </button>
      <button class="btn-defaults" type="submit">{{ current_page }}</button>
      <button
        class="btn-default"
        type="submit"
        @click="nextPage"
        :class="{ disabled: disableds }"
      >
        <i class="el-icon-caret-right"></i>
      </button>
      <div class="remarks">
        共 <span> {{ pagesize }} </span>条当前为第
        <span> {{ currentPage }} </span>页
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zt_state: "状态", // 状态
      input3: "", // 搜索内容
      input13: "", // 搜索内容
      input12:'',//积分范围
      select: "手机号", // 默认选择搜索项
      currentPage: 1, //当前页号
      pagesize: 20, //每页大小
      disableds: false,
      selectionItemIndex: "", // 选中的数据行下标
      frozenNumber: "", // 处理冻结的序号
      indexs:'',
      // 主数据
      tableData: [
        {
          id: "0",
          name: "小狗头套宠物服饰小狗头套宠物服饰小狗头套宠物服饰",
          describe: "1500积分",
          type: "15",
          ascription: "5",
          state: "1",
          stock: 0,
          elStyle:true,
          showView:true

        },
        {
          id: "1",
          name: "小狗头套宠物服饰小狗头套宠物服饰小狗头套宠物服饰",
          describe: "1500积分",
          type: "15",
          ascription: "5",
          state: "1",
          stock: 100,
          elStyle:true,
          showView:true
        },
        {
          id: "0",
          name: "小狗头套宠物服饰小狗头套宠物服饰小狗头套宠物服饰",
          describe: "1500积分",
          type: "15",
          ascription: "5",
          state: "1",
          stock: 0,
          elStyle:true,
          showView:true
        },
        {
          id: "1",
          name: "小狗头套宠物服饰小狗头套宠物服饰小狗头套宠物服饰",
          describe: "1500积分",
          type: "15",
          ascription: "5",
          state: "1",
          stock: 100,
          elStyle:true,
          showView:true
        },
        {
          id: "0",
          name: "小狗头套宠物服饰小狗头套宠物服饰小狗头套宠物服饰",
          describe: "1500积分",
          type: "15",
          ascription: "5",
          state: "1",
          stock: 0,
          elStyle:true,
          showView:true
        },
        {
          id: "1",
          name: "小狗头套宠物服饰小狗头套宠物服饰小狗头套宠物服饰",
          describe: "1500积分",
          type: "15",
          ascription: "5",
          state: "1",
          stock: 100,
          elStyle:true,
          showView:true
        },
        {
          id: "0",
          name: "小狗头套宠物服饰小狗头套宠物服饰小狗头套宠物服饰",
          describe: "1500积分",
          type: "15",
          ascription: "5",
          state: "1",
          stock: 0,
          elStyle:true,
          showView:true
        },
        {
          id: "1",
          name: "小狗头套宠物服饰小狗头套宠物服饰小狗头套宠物服饰",
          describe: "1500积分",
          type: "15",
          ascription: "5",
          state: "1",
          stock: 100,
          elStyle:true,
          showView:true
        },
      ],
      multipleSelection: "", // 所选择的主数据
    };
  },
  computed: {
    page_arrs() {
      let { currentPage, pagesize } = this;
      return this.tableData.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    current_page() {
      return this.currentPage;
    },
  },
  methods: {
    //表格换色
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex; // 给row附上index下标方便删除操作
      if (rowIndex % 2 === 0) {
        return "success-row";
      } else {
        return "warning-row";
      }
      return "";
    },
    //分页
    prePage() {
      this.disableds = false;
      if (this.currentPage == 1) {
        return;
      }
      this.currentPage = this.currentPage - 1;
      //   this.getdata(); // 数据查询
    },
    // 切换页码
    nextPage() {
      if (this.currentPage == Math.ceil(this.tableData.length)) {
        return;
      }
      this.currentPage = this.currentPage + 1;
      this.getdata();
    },
    // 序号选择操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 批量删除列表数据
    dellist(){

    },
  // 编辑
  bianji(index, row){
    row.elStyle=!row.elStyle
    row.showView=!row.showView
  }
  },
};
</script>
<style src="../../components/css/marketing_css/integral.css"  scoped></style>